import React, { useState, useImperativeHandle, useEffect } from 'react';
import styles from './index.module.less';
import classnames from 'classnames';
import { useSelector } from 'react-redux';
import { getMyProcessModel } from '@/services/approval';
import { applyType } from '@/constants';
import history from '@/utils/history';
import _ from 'lodash';

const OptionsNav: React.FC<any> = React.forwardRef((_props, ref) => {
  const [visible, setVisible] = useState(false);
  const [declareList, setDeclareList] = useState([]);

  const { userInfo } = useSelector((state: any) => ({
    userMenu: state.common.userMenu,
    userInfo: state.common.userInfo,
  }));

  useEffect(() => {
    getDelcares();
  }, []);

  useImperativeHandle(ref, () => ({
    toggleVisible: handleToggle,
  }));

  const handleToggle = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    if (e?.target !== e?.currentTarget) {
      return;
    }
    setVisible(!visible);
  };

  const getDelcares = async () => {
    const res = await getMyProcessModel();
    setDeclareList(res.data);
  };

  const getJumpPath = (item) => {
    if (item.path) {
      return history.push({
        pathname: '/declare', // item.path,
        query: {
          title: item.name,
        },
      });
    }
    history.push({
      pathname: 'apply',
      query: {
        applyType: applyType.ONLINE_DOCUMENT_APPLY,
        innerProcDefId: item.innerProcDefId,
        title: `${userInfo.userName}的${item.name}`,
      },
    });
  };

  const handleJump2Detail = (item: any) => {
    history.push({
      pathname: '/apply',
      query: {
        innerProcDefId: item.innerProcDefId,
        title: item.procModelName,
        orgId: item.orgId,
        applyType: item.procTypeCode,
      },
    });
  };

  const getImgUrl = (item: any) => {
    if (item.iconUrl) {
      return item.iconUrl;
    } else {
      const officialAuthArr = [
        'official-add',
        'official-record',
        'official-item',
      ];
      if (!officialAuthArr.includes(item.code))
        return (
          require(`@/assets/images/nav-children-${'official-doc-create'}.png`) ||
          ''
        );
    }
  };

  const renderDeclareList = () => {
    return (
      <>
        {declareList.map((item: any,index) => {
          let list = item.list || [];
          return (
            <div className={styles['options-list']} key={index}>
              <div className={styles['list-title']}>{item.title}</div>
              <ul className={styles['list-items-wrap']}>
                {list?.map((routeItem) => (
                  <a
                    className={styles['list-item']}
                    key={routeItem.procDefKey}
                    onClick={() => handleJump2Detail(routeItem)}
                  >
                    {
                      <img
                        className={styles['item-icon']}
                        src={require('@/assets/images/nav-pic-declare.png')}
                        // src={routeItem.iconUrl}
                      />
                    }
                    <div>
                      <p className={styles['item-text']}>
                        {routeItem.procModelName}
                      </p>
                      <p className={styles['item-declare']}>
                        {routeItem.procRemark}
                      </p>
                    </div>
                  </a>
                ))}
              </ul>
            </div>
          );
        })}
      </>
    );
  };

  return (
    <div
      className={classnames(styles['wrap'], !visible ? styles['hide'] : '')}
      onClick={handleToggle}
    >
      <div className={styles['scroll-wrap']}>
        <div className={styles['container']}>{renderDeclareList()}</div>
      </div>
      <div className={styles['footer']}>
        <span>
          <i
            className={classnames('iconfont icon', styles['icon'])}
            onClick={handleToggle}
          >
            &#xe6ec;
          </i>
        </span>
      </div>
    </div>
  );
});

export default OptionsNav;
